<template>
  <div class="supplier-detail bgc-black">
    <el-container>
      <el-aside width="300px">
        <page-aside :supplierInfo = "supplierInfo"></page-aside>
      </el-aside>
      <el-main>
        <div>
          <tab-btn @getSortText="getSortText"></tab-btn>
        </div>
        <div class="mar-t-20">
          <search-area :placeholder="placeholder" :total='total' :totalAmount='totalAmount' @searchRes='searchRes' @resetComditions='resetComditions'></search-area>
        </div>
        <div style="margin-top:36px">
          <search-condition :comditions='comditions' @changeComditions='changeComditions'></search-condition>
        </div>
        <div>
          <view-button :today="true" @changeDate='changeDate' @exportExcle="exportExcle" :sortText="sortText"></view-button>
        </div>
        <div class="width-1386">
          <detail-table></detail-table>
        </div>
        <!-- 分页 -->
        <div v-if="parseInt(total)" class="mar-t-20 pagination">
          <el-pagination background layout="prev, pager, next" :current-page="detailParams.currentPage" :page-size="10" :total="parseInt(total)" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ViewButton from '../../components/ViewButton'
import SearchArea from '../../components/SearchArea'
import SearchCondition from '../../components/SearchCondition'
import PageAside from './components/PageAside'
import TabBtn from './components/TabBtn'
import DetailTable from './components/DetailTable'
import { getSupplier, pageSupplierGoods } from '@/api/data-analysis/data-analysis'
import { downloadFile } from '@/api/common/common'

export default {
  components: { PageAside, TabBtn, SearchCondition, SearchArea, ViewButton, DetailTable },
  data() {
    return {
      params: {
        enterpriseId: '',	// 企业id
        supplierId: '', // 供应商ID
        supplierName: '' //	供应商名称
      },
      detailParams: {
        currentPage: 1, // 当前页
        endTime: '', // 结束时间
        enterpriseId: '', // 企业id
        oneCategoryId: '', // 一级分类id
        saleSource: '', // 销售渠道 0 微信 1:抖音 2:快手 3: 淘宝 4: 拼多多
        size: 10, // 每页显示条数，默认 10
        sortType: 2, // 排序方式 1：按销量排序 2：按销售额排序 3：退款率
        startTime: '', // 起始时间
        maxTotalPrice: '', // 商品销售额查询范围结束值
        minTotalPrice: '', // 	商品销售额查询范围起始值
        supplierId: '', // 供应商id
        title: ''
      },
      supplierInfo: {}, // 供应商信息
      placeholder: '请输入商品名称',
      total: '',
      totalAmount: '',
      comditions: ['oneCategory', 'Performance', 'saleSource'],
      records: [],
      sortText: '销售额'
    }
  },
  mounted() {
    this.init()
    const that = this
    this.$bus.$on('getSortType', (res) => {
      that.detailParams.sortType = res
      that.pageSupplierGoods()
    })
    // 今日时间
    this.params.endTime = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 23:59:59`
    this.params.startTime = ''
    this.params.supplierId = this.getCurrentPage().query.supplierId
    this.params.enterpriseId = this.getEnterpriseId()
    this.getSupplier()
    this.resetComditions()
  },
  destroyed() {
    this.$bus.$off('resetComditions')
  },
  methods: {
    init() {
      // this.detailParams.startTime = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 10), 'yyyy-MM-dd')} 00:00:00`
      // this.detailParams.endTime = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate()), 'yyyy-MM-dd')} 23:59:59`
      this.detailParams.startTime = ''
      this.detailParams.endTime = ''
      this.detailParams.supplierId = this.getCurrentPage().query.supplierId
      this.detailParams.enterpriseId = this.getEnterpriseId()
      this.pageSupplierGoods()
    },
    getSortText(text) {
      this.sortText = text
    },
    // 获取供应商详情信息
    getSupplier() {
      const data = this.params
      getSupplier(data).then(response => {
        this.supplierInfo = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    //  获取列表信息
    pageSupplierGoods() {
      this.$bus.$emit('loading', true)
      this.$bus.$emit('getDetailTable', [])
      const data = this.detailParams
      pageSupplierGoods(data).then(response => {
        this.records = response.data.records
        this.total = response.data.total
        this.totalAmount = response.data.totalAmount
        this.records.forEach((item, index) => {
          this.$set(item, 'rank', ((index + 1) + (this.detailParams.currentPage * 10 - 10)))
        })
        this.$bus.$emit('getDetailTable', this.records)
        this.$bus.$emit('loading', false)
      }).catch(err => {
        console.log(err)
        this.$bus.$emit('loading', false)
      })
    },
    // 通过商品名称 进行搜索
    searchRes(res) {
      this.detailParams.currentPage = 1
      this.detailParams.title = res
      this.pageSupplierGoods()
    },
    // 切换查询时间
    changeDate(startTime, endTime) {
      this.detailParams.currentPage = 1
      this.detailParams.startTime = startTime
      this.detailParams.endTime = endTime
      this.pageSupplierGoods()
    },
    // 切换查询条件
    changeComditions(data) {
      Object.assign(this.detailParams, data)
      this.detailParams.currentPage = 1
      this.pageSupplierGoods()
    },
    // 改变分页
    handleCurrentChange(num) {
      this.detailParams.currentPage = num
      this.pageSupplierGoods()
    },
    exportExcle() {
      const data = this.params
      downloadFile('/data/userAnalysis/exportSupplierGoods', data, '供应商商品分析.xlsx')
    },
    // 重置赛选条件
    resetComditions() {
      this.$bus.$on('resetComditions', () => {
        this.detailParams = {
          currentPage: 1,
          endTime: '',
          enterpriseId: '',
          oneCategoryId: '',
          saleSource: '',
          size: 10,
          sortType: 2,
          startTime: '',
          maxTotalPrice: '',
          minTotalPrice: '',
          supplierId: '',
          title: ''
        }
        this.init()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .supplier-detail {
    padding: 17px 24px;
    height: 100%;
    /deep/ .el-main {
      padding-top: 0px;
    }
  }
.pagination {
    text-align: center;
  /deep/ .el-pager li, /deep/ .btn-prev , /deep/ .btn-next{
    border: 1px solid rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.5);
    background: #2b2b2e;
  }
}
/deep/ .el-main {
  padding-right: 0px;
}
</style>